import { nextTick } from 'vue'
import { useDebounceFn } from '@vueuse/shared'
import moment from 'moment'
import type { Moment } from 'moment'
export async function useDragVerify(
  id: string,
  containerId: string,
  progressId: string,
  success: () => any,
  cancel?: () => any
) {
  await nextTick()
  const verifyEl = document.querySelector(id) as HTMLElement
  const containerEl = document.querySelector(containerId) as HTMLElement
  const progressEl = document.querySelector(progressId) as HTMLElement

  const verifyElOffsetWidth = verifyEl?.offsetWidth
  const containerElOffsetWidth = containerEl?.offsetWidth
  const progressElOffsetWidth = progressEl?.offsetWidth

  const successFn = useDebounceFn(success, 200)
  const cancelFn = cancel && useDebounceFn(cancel, 200)

  let startTime: Moment = moment(null)

  // 记录点击时的横坐标，算差值时用
  let diffX = 0
  // onmousedown 全局属性
  verifyEl.onmousedown = (e) => {
    console.log('onmousedown')
    startTime = moment(new Date())
    down(e)
    document.onmousemove = (e) => move(e)
    document.onmouseup = (e) => up(e)
  }

  verifyEl.ontouchstart = (e) => {}

  function down(e: MouseEvent) {
    diffX = 0
    let clientX = 0
    if (e.type === 'touchstart') {
      const e1 = e as unknown as TouchEvent
      clientX = e1.changedTouches[0].clientX
    } else if (e.type === 'mousedown') {
      clientX = e.clientX
    }
    diffX = clientX - verifyEl.offsetLeft
    console.log('down diffx =' + diffX)
  }

  function move(e: MouseEvent) {
    let clientX = 0
    if (e.type === 'touchmove') {
      const e1 = e as unknown as TouchEvent
      clientX = e1.changedTouches[0].clientX
    } else if (e.type === 'mousemove') {
      clientX = e.clientX
    }

    let moveX = clientX - diffX

    // 这里防止超出界面 成功
    if (moveX >= containerElOffsetWidth - verifyElOffsetWidth) {
      moveX = containerElOffsetWidth - verifyElOffsetWidth
    } else if (moveX <= 0) {
      moveX = 0
    }
    updateStyle([verifyEl], 'left', moveX + 'px')
    updateStyle([progressEl], 'width', moveX + 'px')
  }

  // 抬起事件
  function up(e: MouseEvent) {
    let clientX = 0
    if (e.type === 'touchend') {
      const e1 = e as unknown as TouchEvent
      clientX = e1.changedTouches[0].clientX
      document.ontouchmove = null
      document.ontouchend = null
    } else if (e.type == 'mouseup') {
      clientX = e.clientX

      document.onmousemove = null
      document.onmouseup = null
    }

    console.log('clientX = ' + clientX)
    console.log('diffX = ' + diffX)
    console.log('containerElOffsetWidth = ' + containerElOffsetWidth)
    if (clientX - diffX >= containerElOffsetWidth - 50) {
      complete()
    } else {
      reset()
    }
  }
  function complete() {
    const b = isReboot()
    if (b) {
      successFn()
    } else {
      reset()
      return
    }
    verifyEl.onmousedown = null
    verifyEl.ontouchstart = null
  }
  function reset() {
    updateStyle([verifyEl], 'left', 0 + 'px')
    updateStyle([progressEl], 'width', 0 + 'px')
    diffX = 0
    startTime = moment(null)
    cancelFn && cancelFn()
  }
  // 更新节点样式
  function updateStyle(selectors: HTMLElement[], attr: any, content: string) {
    selectors.forEach((item) => {
      item.style[attr] = content
    })
  }

  function isReboot() {
    const nowTime = moment(new Date())
    if (!startTime || nowTime.diff(startTime, 'millisecond') < 200) {
      return false
    } else {
      return true
    }
  }
  return {
    reset,
  }
}
